<template>
	<view class="waterfall-item-container">

		<view class="waterfall-item" @tap="onTap">
			<!-- @load="emitHeight" @error="emitHeight" -->
			<image :src="params.storeInfo.image" mode="aspectFill" lazy-load></image>
			<view class="content">
				<view  style="font-weight: 600;display: flex;margin-bottom: 10rpx;" >
					<!-- <view class="uni-tag-btn"v-if="!storeInfo.merId" style="margin: 0 20rpx; width: 85rpx; text-align: center;">
						直营
					</view> -->
				{{params.storeInfo.storeName}}
				</view>
				<!-- v-if="type==1" -->
			<!-- 	<view class="title more-t over" style="display: flex;align-items: center;font-size: 22rpx;justify-content: space-between;" >
				{{params.storeInfo.productLabelOne || '厂家直供'}}<u-line direction="col" length="23rpx" ></u-line>
					{{params.storeInfo.productLabelTwo || '品质保证'}} <u-line direction="col" length="23rpx" ></u-line>
					{{params.storeInfo.productLabelThree || '源头厂家'}}
				</view> -->
				
		<!-- 		<view class="argument">
					<view class="argument-item" style="width: 33%;" v-for="(item,index) in params.productAttr" :key="index">
						<view class="parms">
							<view class="data">
								{{item.attrValues.split(",")[0]}}
							</view>
							<view class="fields">
								{{item.attrName}}
							</view>
						</view>
						<text class="line" v-if="params.productAttr&&index!=params.productAttr.length-1"> </text>
					</view>
				</view> -->
				
				<view v-if="$store.getters.token||userInfo.uid" class="price-box">
					￥<text class="price">
						<text v-if="userInfo.roleIdentification=='investment'||userInfo.roleIdentification=='store_administrator'||(userInfo.roleIdentification=='marketing_personnel'&&userInfo.roleLevel==1) ">{{params.storeInfo.merchantsPrice}}</text>
						<text v-if="userInfo.roleIdentification == 'dealer'||(userInfo.roleIdentification=='marketing_personnel'&&userInfo.roleLevel==2)">{{params.storeInfo.businessPrice}}</text>
						<text v-if="userInfo.roleIdentification == 'wholesaler'||(userInfo.roleIdentification=='marketing_personnel'&&userInfo.roleLevel==3)">{{params.storeInfo.wholesalePrice}}</text>
						<text v-if="userInfo.roleIdentification == 'group'||(userInfo.roleIdentification=='marketing_personnel'&&userInfo.roleLevel==4)">{{params.storeInfo.grouponPrice}}</text>
						<text v-if="userInfo.roleIdentification == 'member'||!userInfo.roleIdentification">{{params.storeInfo.price}}</text>
						
						<!-- grouponPrice：团购价
						merchantsPrice：招商价
						businessPrice：经商价
						wholesalePrice：批发价
						price:会员价 -->
						
					</text>/{{params.storeInfo.unitName}}
				</view>
				<view v-else style="font-size: 12px; color: #ed5e78;">登录获取价格</view>
				<view class="" style="font-weight: 500;font-size: 20rpx;color: #333333;" >
					库存:{{params.storeInfo.stock}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		computed: mapGetters(["userInfo"]),
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {}
		},
		methods:{
			// stateStroe(){
			// 		let data=this.roleLevelList.find(item=>item.remark==this.userInfo.roleIdentification)
			// 		if (data.name=='市场人员') {
						
			// 		}
			//  return	
			 
			// },
			
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(){
				this.$emit("click", this.$props.params.storeInfo.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
.waterfall-item{
	padding: 16rpx;
	background-color: #fff;
	border-radius: 4px;
	font-size: 28rpx;
	color: #666;
	
	image{
		display: block;
		width: 100%;
		// 默认设置一个图片的大约值
		height: 350rpx;
	}
	
	.content{
		margin-top: 16rpx;
		
		.label{
			background-color: #fa3534;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
	}
}

/deep/.u-button--mini {
	margin: 0;
	height: 60rpx;
}

.price-box {
	font-weight: 500;
	font-size: 22rpx;
	color: #ed5e78;
	margin-bottom: 10rpx;
	// display: flex;
	.price {
		font-weight: 500;
		font-size: 30rpx;
		color: #ed5e78;
		// width: 118rpx;
		// height: 28rpx;
		font-weight: 600;
	}
	.ot_price {
		width: 96rpx;
		// height: 19rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #999999;
		text-decoration-line: line-through;
	
	}
	.text {
		margin-left: 15rpx;
		margin-right: 15rpx;
		width: 70rpx;
		height: 23rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #9f2b45;
	}
}

.line {
	// line-height: 60rpx;
	width: 1rpx;
	height: 23rpx;
	background: #999999;
	margin-top: 18.5rpx;
}
.argument {
	display: flex;
	// padding: 0 10rpx;
	align-items: center;
	margin: 10rpx 0;
	min-height: 40rpx;
	.argument-item {
		// width: 35%;
		display: flex;

		.tags {
			line-height: 30rpx;
			height: 40rpx;
			background: #FCEDE7;
			border-radius: 6rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #9f2b45;
			padding: 5rpx 7rpx;
			margin-right: 20rpx;
		}
		.parms {
			width: 97%;

			.data {
				// width: 55rpx;
				text-align: center;
				// height: 24rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #333333;
				padding: 1rpx 0;
				// line-height: 50rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				white-space: nowrap;
			}
			.fields {
				padding: 1rpx 0;
				// width: 59rpx;
				// height: 20rpx;
				text-align: center;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				// line-height: 50rpx;
			}
		}
	}
}
</style>
